<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
        <el-form-item label="物料编号" prop="itemCode">
          <el-input v-model="queryParams.itemCode" placeholder="请输入物料编号" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="物料名称" prop="itemName">
          <el-input v-model="queryParams.itemName" placeholder="请输入物料名称" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="商品品牌" prop="itemBrand">
          <el-select v-model="queryParams.itemBrand" clearable filterable>
            <el-option v-for="item in useWmsStore().itemBrandList" :key="item.id" :label="item.brandName"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="mt20">
      <div style="display: flex;align-items: start">
        <div>
          <div style="display: flex;align-items: center;justify-content: space-between">
            <span style="font-size: 18px;line-height: 18px">物料分类</span>
            <el-button class="mr10" style="font-size:12px;line-height: 14px" plain @click="handleAddType(false)"
              type="primary" icon="Plus">新增分类
            </el-button>
          </div>
          <el-tree :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
            style="width: 400px;" class="mr10 mt10" @nodeClick="handleQueryType" :default-expand-all="true"
            :highlight-current="true" node-key="label" current-node-key="全部" draggable :allow-drop="collapse"
            @node-drop="handleNodeDrop" :expand-on-click-node="false">
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span>
                  <el-button type="primary" @click.stop="append(data)" link v-if="data.label !== '全部' && node.level < 2"
                    icon="Plus" style="font-size: 12px">新增子分类</el-button>
                  <el-button type="primary" @click.stop="remove(node, data)" link v-if="data.label !== '全部'"
                    icon="Delete" style="font-size: 12px">删除</el-button>
                  <el-button type="primary" icon="Edit" @click.stop="edit(node, data)" link v-if="data.label !== '全部'"
                    style="font-size: 12px">修改</el-button>
                </span>
              </span>
            </template>
          </el-tree>
        </div>
        <div style="width: 100%;position: relative">
          <div style="display: flex;align-items: start;justify-content: space-between">
            <span class="mr10" style="font-size: 18px;">物料列表</span>
            <el-button type="primary" plain icon="Plus" @click="handleAdd" class="mb10">新增物料</el-button>
          </div>
          <el-table :data="itemList" @selection-change="handleSelectionChange" :span-method="spanMethod" border
            empty-text="暂无物料" v-loading="loading" cell-class-name="my-cell">
            <el-table-column label="物料信息" prop="itemId">
              <template #default="{ row }">
                <div>{{ row.item.itemName + (row.item.itemCode ? ('(' + row.item.itemCode + ')') : '') }}</div>
                <div v-if="row.item.itemBrand">{{ row.item.itemBrand ? ('品牌：' +
                  useWmsStore().itemBrandMap.get(row.item.itemBrand)?.brandName) : '' }}</div>
                <div v-if="row.item.itemCategory">{{ row.item.itemCategory ? ('分类：' +
                  useWmsStore().itemCategoryMap.get(row.item.itemCategory)?.categoryName) : '' }}</div>
              </template>
            </el-table-column>
            <el-table-column label="规格信息" prop="skuName" align="left">
              <template #default="{ row }">
                <div>{{ row.skuName }}</div>
                <div v-if="row.skuCode">编号：{{ row.skuCode }}</div>
                <div v-if="row.barcode">条码：{{ row.barcode }}</div>
                <!--                <div>-->
                <!--                  <el-button link type="primary" icon="Download" @click="downloadBarcode(row)">下载条形码</el-button>-->
                <!--                  <el-button link type="primary" icon="Download" @click="downloadQrcode(row)" style="margin-left: 0!important;">-->
                <!--                    下载二维码-->
                <!--                  </el-button>-->
                <!--                </div>-->
              </template>
            </el-table-column>
            <el-table-column label="价格(元)" width="160" align="left">
              <template #default="{ row }">
                <div v-if="row.costPrice" class="flex-space-between">
                  <span>成本价：</span>
                  <div>{{ (row.costPrice || row.costPrice === 0) ? row.costPrice : '' }}</div>
                </div>
                <div v-if="row.sellingPrice" class="flex-space-between">
                  <span>销售价：</span>
                  <div>{{ (row.sellingPrice || row.sellingPrice === 0) ? row.sellingPrice : '' }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="重量(kg)" width="160" align="left">
              <template #default="{ row }">
                <div v-if="row.netWeight" class="flex-space-between">
                  <span>净重：</span>
                  <div>
                    {{ (row.netWeight || row.netWeight === 0) ? row.netWeight : '' }}
                  </div>
                </div>
                <div v-if="row.grossWeight" class="flex-space-between">
                  <span>毛重：</span>
                  <div>
                    {{ (row.grossWeight || row.grossWeight === 0) ? row.grossWeight : '' }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="长宽高(cm)" align="right" width="250">
              <template #default="{ row }">
                <div>{{ getVolumeText(row) }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="right" prop="itemId" width="200">
              <template #default="scope">
                <el-button link type="primary" @click="handleDelete(scope.row)" icon="Delete">删除</el-button>
                <el-button link type="primary" @click="handleUpdate(scope.row)" icon="Edit">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
        </div>
      </div>
    </el-card>
    <!-- 添加或修改物料对话框 -->
    <el-drawer :title="dialog.title" v-model="dialog.visible" size="80%" append-to-body :close-on-click-modal="false">
      <el-card>
        <el-form ref="itemFormRef" :model="form" :rules="rules" label-width="108px">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="物料名称" prop="itemName">
                <el-input v-model="form.itemName" placeholder="请输入名称" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="物料分类" prop="itemCategory">
                <el-tree-select ref="treeRef" v-model="form.itemCategory" :data="deptOptions2"
                  :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择分类"
                  check-strictly style="width: 100%!important;" />
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-button link icon="Plus" type="primary" style="height: 32px!important;line-height: 32px!important;"
                @click="handleAddType(true)">新增分类
              </el-button>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="物料编号" prop="itemCode">
                <el-input v-model="form.itemCode" placeholder="请输入编号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物料单位" prop="unit">
                <el-input v-model="form.unit" placeholder="请输入单位类别" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="物料品牌" prop="itemBrand">
                <el-select v-model="form.itemBrand" clearable filterable style="width: 100%!important;">
                  <el-option v-for="item in useWmsStore().itemBrandList" :key="item.id" :label="item.brandName"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="供应商" prop="merchantId">
                <el-select v-model="form.merchantId" clearable filterable style="width: 100%!important;">
                  <el-option v-for="item in merchant" :key="item.id" :label="item.merchantName"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </el-card>
      <el-card class="mt20">
        <template #header>
          <div class="card-header">
            <span>规格</span>
          </div>
        </template>
        <el-form :model="skuForm" :rules="skuRules" ref="skuFormRef" :show-message="false">
          <el-table :data="skuForm.itemSkuList" border cell-class-name="my-cell">
            <el-table-column label="规格名称" prop="skuName">
              <template #default="scope">
                <el-form-item :prop="'itemSkuList.' + scope.$index + '.skuName'" :rules="skuRules.skuName"
                  style="margin-bottom: 0!important;">
                  <el-input v-model="scope.row.skuName" placeholder="请输入规格名称" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="编号/条码" width="250">
              <template #default="scope">
                <div class="flex-center">
                  <span class="mr5" style="width: 50px">编号</span>
                  <el-input v-model="scope.row.skuCode" />
                </div>
                <div class="flex-center mt5">
                  <span class="mr5" style="width: 50px">条码</span>
                  <el-input v-model="scope.row.barcode" />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="长/宽/高(cm)" width="200">
              <template #default="scope">
                <div class="flex-center">
                  <span class="mr5">长</span>
                  <el-input-number :controls="false" :min="0" :precision="1" class="mr5" v-model="scope.row.length" />
                </div>
                <div class="flex-center mt5">
                  <span class="mr5">宽</span>
                  <el-input-number :controls="false" :min="0" :precision="1" class="mr5" v-model="scope.row.width" />
                </div>
                <div class="flex-center mt5">
                  <span class="mr5">高</span>
                  <el-input-number :controls="false" :min="0" :precision="1" v-model="scope.row.height" />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="净重/毛重(kg)" width="240">
              <template #default="scope">
                <div class="flex-center">
                  <span class="mr5">净重</span>
                  <el-input-number :controls="false" :min="0" :precision="3" v-model="scope.row.netWeight" />
                </div>
                <div class="flex-center mt5">
                  <span class="mr5">毛重</span>
                  <el-input-number :controls="false" :min="0" :precision="3" v-model="scope.row.grossWeight" />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="成本价/销售价(元)" width="240">
              <template #default="scope">
                <div class="flex-center">
                  <span class="mr5">成本价</span>
                  <el-input-number :controls="false" :min="0" :precision="2" v-model="scope.row.costPrice" />
                </div>
                <div class="flex-center mt5">
                  <span class="mr5">销售价</span>
                  <el-input-number :controls="false" :min="0" :precision="2" v-model="scope.row.sellingPrice" />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" class-name="small-padding fixed-width" width="80" align="right">
              <template #default="scope">
                <el-button link icon="Delete" type="primary"
                  @click="handleDeleteItemSku(scope.row, scope.$index)">删除</el-button>
              </template>
            </el-table-column>
            <template #append v-if="skuForm.itemSkuList.length">
              <div style="padding: 6px 2px 6px 2px;text-align: center;">
                <el-button text class="add-btn" icon="Plus" type="primary" @click="onAppendBtnClick">添加物料规格
                </el-button>
              </div>
            </template>
            <template #empty>
              <div style="padding: 2px 2px 6px 2px;text-align: center;width: 100%!important;">
                <el-button text class="add-btn" icon="Plus" type="primary" @click="onAppendBtnClick">添加物料规格
                </el-button>
              </div>
            </template>
          </el-table>
        </el-form>
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 添加或修改物料类型对话框 -->
    <el-dialog :title="categoryDialog.title" v-model="categoryDialog.visible" width="500px" append-to-body
      :close-on-click-modal="false">
      <el-form ref="itemCategoryFormRef" :model="categoryForm" :rules="typeRules" label-width="128px"
        @submit.native.prevent>
        <el-form-item label="上级分类" prop="parentId">
          <el-tree-select v-model="categoryForm.parentId" :data="deptOptions2"
            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="上级分类"
            check-strictly style="width: 100%!important;" clearable />
        </el-form-item>
        <el-form-item label="物料分类名称" prop="categoryName">
          <el-input v-model="categoryForm.categoryName" placeholder="请输入物料分类名称" @keyup.enter="submitCategoryForm" />
        </el-form-item>
        <!--        <el-form-item label="显示顺序" prop="orderNum">-->
        <!--          <el-input-number v-model="categoryForm.orderNum" controls-position="right" :min="0"/>-->
        <!--        </el-form-item>-->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitCategoryForm">确 定</el-button>
          <el-button @click="cancelType">取 消</el-button>
        </div>
      </template>
      <div id="qrcode"></div>
    </el-dialog>
    <div id="outSkuIdBox" style="display: none">
      <img :src="qrcode" />
      <canvas ref="barcode"></canvas>
    </div>
  </div>
</template>

<script setup name="Item">
  import { getItem, delItem, addItem, updateItem } from '@/api/wms/item';
  import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue';
  import { ElForm, ElMessageBox, ElTree, ElTreeSelect } from 'element-plus';
  import {
    treeSelectItemCategory,
    updateItemCategory,
    addItemCategory,
    delItemCategory,
    updateOrderNum
  } from "@/api/wms/itemCategory";
  import { getRowspanMethod } from "@/utils/getRowSpanMethod";
  import { listItemSkuPage, delItemSku } from "@/api/wms/itemSku";
  import { useRoute } from "vue-router";
  import Qrcode from 'qrcode'
  import JSBarcode from 'jsbarcode'
  import { useWmsStore } from '@/store/modules/wms'

  // author bai
  import { listMerchant } from '@/api/wms/merchant'
  const merchant = ref()

  const barcode = ref(null)
  const route = useRoute()
  const { proxy } = getCurrentInstance();
  const itemList = ref([]);
  const deptOptions = ref([]);
  const deptOptions2 = ref([]);
  const buttonLoading = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const skuLoading = ref(false)
  const queryFormRef = ref(ElForm);
  const itemFormRef = ref(ElForm);
  const itemCategoryFormRef = ref(ElForm);
  const spanMethod = computed(() => getRowspanMethod(itemList.value, rowSpanArray.value))
  const rowSpanArray = ref(['itemId', 'itemCategoryId'])
  const qrcode = ref(null)
  const append = (data) => {
    // resetType();
    categoryForm.value.categoryName = undefined;
    categoryForm.value.parentId = data.id;
    categoryDialog.visible = true;
  }

  const remove = async (node, data) => {
    const ids = data.id
    await proxy?.$modal.confirm('确认删除分类【' + data.label + '】吗？');
    await delItemCategory(ids);
    proxy?.$modal.msgSuccess("删除成功");
    Promise.all([useWmsStore().getItemCategoryList(), useWmsStore().getItemCategoryTreeList()]).then(() => getItemCategoryTreeSelect())
  }
  const edit = (node, data) => {
    if (node.level > 1) {
      categoryForm.value.parentId = node.parent.data.id
    }
    categoryForm.value.id = data.id;
    // resetType();
    categoryForm.value.categoryName = data.label;
    categoryDialog.title = "修改物料分类";
    categoryDialog.visible = true;
  }
  const dialog = reactive({
    visible: false,
    title: ''
  });
  const categoryDialog = reactive({
    visible: false,
    title: ''
  });
  const showParent = ref(false)
  const initFormData = {
    id: undefined,
    itemCode: undefined,
    itemName: undefined,
    itemCategory: undefined,
    unit: undefined,
    itemBrand: undefined,
    remark: undefined,
  }
  const initCategoryFormData = {
    id: undefined,
    parentId: undefined,
    ancestors: undefined,
    categoryName: undefined,
    orderNum: 0,
    status: undefined,
  }
  const data = reactive({
    form: { ...initFormData },
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      itemCode: undefined,
      itemName: undefined,
      itemType: undefined
    },
    rules: {
      id: [
        { required: true, message: "不能为空", trigger: "blur" }
      ],
      itemName: [
        { required: true, message: "名称不能为空", trigger: "blur" }
      ],
      itemCategory: [
        { required: true, message: "分类不能为空", trigger: "blur" }
      ],
      rackId: [
        { required: true, message: "所属货架不能为空", trigger: "blur" }
      ],
      areaId: [
        { required: true, message: "所属库区不能为空", trigger: "blur" }
      ],
      warehouseId: [
        { required: true, message: "所属仓库不能为空", trigger: "blur" }
      ],
      quantity: [
        { required: true, message: "安全库存不能为空", trigger: "blur" }
      ],
      remark: [
        { required: true, message: "备注不能为空", trigger: "blur" }
      ],
    }
  });
  const categoryData = reactive({
    form: { ...initCategoryFormData },
    queryParams: {
      pageNum: 1,
      pageSize: 1000,
      parentId: undefined,
      categoryName: undefined,
      orderNum: undefined,
      status: undefined,
    },
    rules: {
      id: [
        { required: true, message: "物料分类id不能为空", trigger: "blur" }
      ],
      // parentId: [
      //   {required: true, message: "父物料类型id不能为空", trigger: "blur"}
      // ],
      categoryName: [
        { required: true, message: "物料分类名称不能为空", trigger: "blur" }
      ],
      status: [
        { required: true, message: "物料分类状态不能为空", trigger: "change" }
      ],
    }
  });
  const { queryParams, form, rules } = toRefs(data);

  const { queryParams: typeQueryParams, form: categoryForm, rules: typeRules } = toRefs(categoryData);
  const currentType = ref()
  /** 查询物料列表 */
  const getList = async () => {
    loading.value = true;
    const res = await listItemSkuPage(queryParams.value);
    itemList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  }
  const getItemCategoryTreeSelect = async () => {
    const data = [...useWmsStore().itemCategoryTreeList];
    deptOptions2.value = [...useWmsStore().itemCategoryTreeList];
    data.unshift({
      id: -1,
      label: '全部',
      children: []
    })
    deptOptions.value = data;
  }
  const handleAddType = (show) => {
    categoryDialog.title = "新增物料分类";
    showParent.value = show
    categoryDialog.visible = true;
    if (show) {
      categoryForm.value.parentId = undefined
    }
    nextTick(() => {
      categoryForm.value.categoryName = undefined;
    });
  }
  const skuForm = reactive({
    itemSkuList: []
  })
  const skuFormRef = ref(ElForm)
  const skuRules = {
    skuName: [{ required: true, message: '规格名称不能为空', trigger: 'blur' }]
  }
  // sku 管理
  const resetItemSkuList = () => {
    skuForm.itemSkuList = []
    skuForm.itemSkuList.push({
      id: '',
      itemId: '',
      barcode: '',
      inPrice: null,
      outPrice: null,
      skuName: '',
      quantity: null,
    })
  }

  const onAppendBtnClick = () => {
    skuForm.itemSkuList.push({
      id: '',
      itemId: '',
      barcode: '',
      inPrice: null,
      outPrice: null,
      skuName: '',
      quantity: null,
    })
  }
  const handleDeleteItemSku = async (row, index) => {
    if (!row.id) {
      skuForm.itemSkuList.splice(index, 1);
      return
    }
    if (skuForm.itemSkuList.length === 1) {
      return proxy?.$modal.msgError("至少包含一个物料规格");
    }
    await proxy?.$modal.confirm('确认删除规格【' + row.skuName + '】吗？');
    try {
      await delItemSku(row.id);
    } catch (e) {
      if (e === 409) {
        return ElMessageBox.alert(
          '<div>规格【' + row.skuName + '】已有业务数据关联，不能删除 ！</div><div>请联系管理员处理！</div>',
          '系统提示',
          {
            dangerouslyUseHTMLString: true,
          }
        )
      }
    }
    proxy?.$modal.msgSuccess("删除成功");
    const res = await getItem(row.itemId);
    skuForm.itemSkuList = res.data.sku
    form.value = res.data
  }
  const collapse = (draggingNode, dropNode, type) => {
    //注掉的是同级拖拽
    if (draggingNode.data.label !== '全部' && draggingNode.level === dropNode.level && draggingNode.parent.id == dropNode.parent.id) {
      if (dropNode.data.label === '全部') {
        return type === 'next';
      } else {
        return type === 'prev' || type === 'next'
      }
    } else {
      // 不同级进行处理
      return false
    }
  }
  const handleNodeDrop = async (draggingNode, dropNode, dropType, ev) => {
    if (dropNode.level === 1) {
      await updateOrderNum(dropNode.parent.data.filter(it => it.id !== -1));
    } else {
      await updateOrderNum(dropNode.parent.data.children);
    }
  }
  /** 取消按钮 */
  const cancel = () => {
    reset();
    dialog.visible = false;
  }
  const cancelType = () => {
    resetType();
    categoryDialog.visible = false;
  }
  /** 表单重置 */
  const reset = () => {
    form.value = { ...initFormData };
    itemFormRef.value.resetFields();
  }

  /** 表单重置 */
  const resetType = () => {
    categoryForm.value = { ...initCategoryFormData };
    itemCategoryFormRef.value.resetFields();
  }
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
  }

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields();
    handleQuery();
  }

  /** 多选框选中数据 */
  const handleSelectionChange = (selection) => {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
  }

  /** 新增按钮操作 */
  const handleAdd = () => {
    resetItemSkuList()
    skuLoading.value = true
    dialog.visible = true;
    dialog.title = "新增物料";
    nextTick(async () => {
      reset();
      const _id = row?.itemId || ids.value[0]
      const res = await getItem(_id);
      Object.assign(skuForm.itemSkuList, res.data.sku)
      skuLoading.value = false
      Object.assign(form.value, res.data);
    });
  }
  /** 修改按钮操作 */
  const handleUpdate = (row) => {
    resetItemSkuList()
    skuLoading.value = true
    dialog.visible = true;
    dialog.title = "修改物料";
    nextTick(async () => {
      reset();
      const _id = row?.itemId || ids.value[0]
      const res = await getItem(_id);
      Object.assign(skuForm.itemSkuList, res.data.sku)
      skuLoading.value = false
      Object.assign(form.value, res.data);
    });
  }
  const handleQueryType = (node, data) => {
    queryParams.value.pageNum = 1
    if (data.data.label === '全部') {
      queryParams.value.itemCategory = '';
      currentType.value = '';
      getList();
    } else {
      queryParams.value.itemCategory = data.data.id;
      currentType.value = data.data.id;
      getList();
    }
  }
  /** 提交按钮 */
  const submitForm = () => {
    form.value.sku = skuForm.itemSkuList
    itemFormRef.value.validate(async (valid) => {
      if (valid) {
        let flag = true
        if (!skuForm.itemSkuList || skuForm.itemSkuList.length === 0) {
          proxy?.$modal.msgError("至少包含一个物料规格");
          flag = false
        }
        await skuFormRef.value.validate((valid2) => {
          if (!valid2) {
            flag = false;
          }
        })
        if (flag) {
          buttonLoading.value = true;
          if (form.value.id) {
            await updateItem(form.value).finally(() => buttonLoading.value = false);
          } else {
            await addItem(form.value).finally(() => buttonLoading.value = false);
          }
          proxy?.$modal.msgSuccess("修改成功");
          dialog.visible = false;
          await getList();
        }
      }
    });
  }
  const submitCategoryForm = () => {
    itemCategoryFormRef.value.validate(async (valid) => {
      if (valid) {
        buttonLoading.value = true;
        if (categoryForm.value.id) {
          await updateItemCategory(categoryForm.value).finally(() => buttonLoading.value = false);
        } else {
          await addItemCategory(categoryForm.value).finally(() => buttonLoading.value = false);
        }
        proxy?.$modal.msgSuccess(categoryForm.value.id ? '修改成功' : '新增成功');
        categoryDialog.visible = false;
        Promise.all([useWmsStore().getItemCategoryList(), useWmsStore().getItemCategoryTreeList()]).then(() => getItemCategoryTreeSelect())
      }
    });
  }
  /** 删除按钮操作 */
  const handleDelete = async (row) => {
    const _ids = row?.itemId || ids.value;
    await proxy?.$modal.confirm('确认删除物料【' + row?.item.itemName + '】吗？');
    try {
      await delItem(_ids);
    } catch (e) {
      if (e === 409) {
        return ElMessageBox.alert(
          '<div>物料【' + row.item.itemName + '】已有业务数据关联，不能删除 ！</div><div>请联系管理员处理！</div>',
          '系统提示',
          {
            dangerouslyUseHTMLString: true,
          }
        )
      }
    }
    proxy?.$modal.msgSuccess("删除成功");
    await getList();
  }
  const treeRef = ref(null)
  /** 导出按钮操作 */
  const handleExport = () => {
    proxy?.download('wms/item/export', {
      ...queryParams.value
    }, `item_${new Date().getTime()}.xlsx`)
  }
  /** 下载条形码 */
  const downloadBarcode = (row) => {
    JSBarcode(barcode.value, row.barcode, {
      format: "CODE128",
      displayValue: true
    })
    const canvas = barcode.value
    //创建a标签
    let a = document.createElement('a')
    //设置下载文件的名字
    a.download = row.barcode
    a.href = canvas.toDataURL("image/png")
    a.click()
  }
  /** 下载二维码 */
  const downloadQrcode = async (row) => {
    qrcode.value = await Qrcode.toDataURL(row.barcode)
    //创建a标签
    let a = document.createElement('a')
    //获取二维码的url并赋值为a.href
    a.href = qrcode.value
    //设置下载文件的名字
    a.download = row.barcode
    //点击事件，相当于下载
    a.click()
    //提示信息
    // this.$message.warn('下载中，请稍后...')
  }
  const getVolumeText = (row) => {
    if ((row.length || row.length === 0) && (row.width || row.width === 0) && (row.height || row.height === 0)) {
      return row.length + ' * ' + row.width + ' * ' + row.height
    }
    return ((row.length || row.length === 0) ? ('长：' + row.length) : '')
      + ((row.width || row.width === 0) ? (' 宽：' + row.width) : '')
      + ((row.height || row.height === 0) ? (' 高：' + row.height) : '')
  }
  onMounted(async () => {
    getList();
    getItemCategoryTreeSelect();
    if (route.query.openDrawer) {
      handleAdd()
    }

    merchant.value = await listMerchant('pageSize=100&&pageNum=1')
    merchant.value = merchant.value.rows
    console.log(merchant.value);
  });
</script>
<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .el-tree-node__content {
    display: flex;
    align-items: center;
    height: 35px;
    cursor: pointer;
  }

  .el-table .my-cell {
    vertical-align: top
  }

  .el-table__empty-text {
    width: 100%;
  }
</style>
